import "./Main.scss"
import React from "react";
import { connect } from "react-redux";
import NavHeader from "component/NavHeader/NavHeader";
import { Route, withRouter, NavLink } from 'react-router-dom'
import Menu from "../Menu/Menu"
import Comment from "../Comment/Comment"
import Restanurant from "../Restanurant/Restanurant"
class Main extends React.Component {
    constructor(props) {
        super(props);
    }
    renderTabs() {
        const _tabs = this.props.tabs || []
        return _tabs.map((tab, index) => {
            return (
                <NavLink replace={true} to={'/' + tab.key} key={index} activeClassName="active" className="tab-item">{tab.name}</NavLink>
            )
        })
    }
    render() {
        return (
            <div className="detail">
                <NavHeader title="肯德基"></NavHeader>
                <div className="tab-bars">
                    {
                        this.renderTabs()
                    }
                </div>

                <Route exact path="/menu" component={Menu}></Route>
                <Route path="/comment" component={Comment}></Route>
                <Route path="/restanurant" component={Restanurant}></Route>
                {this.props.showChooseContent ? <div className="mask"></div> : null}
            </div>
        );
    }
}

export default withRouter(connect((state) => ({
    tabs: state.tabReducer.tabs,
    showChooseContent: state.menuReducer.showChooseContent
}))(Main)); 
